<template>
	<view class="content">
		<!-- #ifdef H5 -->
		<button>H5 能看到我</button>
		<!-- #endif -->
		
		<!-- #ifndef H5 -->
		<button>非H5 能看到我</button>
		<!-- #endif -->
		
		<button class="btn" @click="handleFn1">点我，调用拍照</button>

		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<Hello name="李四" />
		<world name="张三" />
		<uni-hello></uni-hello>
	</view>
</template>

<script>
	// 引入组件
	import Hello from '../../components/hello/index.vue'

	export default {
		// 注册组件
		components: {
			Hello,
		},
		data() {
			return {
				title: '你好'
			}
		},
		onLoad() {
			// 获取地理位置
			// 		需要配置 requiredPrivateInfos .这个配置项需要在 manifest.json 中配置
			uni.getLocation({
				success: (res) => {
					console.log('res', res)
				}
			})
		},
		onShow() {

		},
		onHide() {

		},
		onReady() {

		},
		methods: {
			handleFn1() {
				// #ifdef APP-PLUS
				// app 下的 摄像头管理对象
				const cam = plus.camera.getCamera()
				cam.captureImage((res) => {
					// 成功的回调
					console.log(res, '成功的回调')
				}, (error) => {
					// 失败的回调
					console.log(error, '失败的回调')
				})
				// #endif


				// #ifdef H5
				console.log('H5')
				// #endif

				// #ifndef H5
				console.log('非H5')
				// #endif


			}
		}
	}
</script>

<!-- 
	可视化下，要使用 sass ，直接标明，然后编辑器会自动去下载 sass 相关的操作。
	CLI下，要使用 sass，除了标明之外，还需要手动安装 sass （npm install sass）
		
 -->
<style lang="scss">
	.btn {
		color: red;
		/* #ifdef H5 */
		color: green;
		/* #endif */
	}
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>